fix iOS frameworks bugs, footer

src/scss/index.scss

@@ -39,6 +39,23 @@ a {
 
 /** nes.css overrides */
 
+/** START BUGFIX (https://github.com/nostalgic-css/NES.css/issues/8 as of 4/18/2019) */
+
+.nes-input,
+.nes-textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.nes-radio,
+.nes-checkbox {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+/** END BUGFIX */
+
 body {
   background-color: $main-background-color;
   color: $main-font-primary-color;
@@ -139,6 +156,7 @@ a.list-item {
   }
 }
 
+// stylelint-disable no-duplicate-selectors
 .nes-input,
 .nes-textarea {
   padding-top: 0.25rem;
@@ -163,6 +181,7 @@ a.list-item {
     color: $main-font-secondary-color;
   }
 }
+// stylelint-enable
 
 // same as .nes-input
 .nes-select.dropdown {

src/ts/app/components/Footer.tsx

@@ -3,7 +3,7 @@ import Media from 'react-media';
 
 import classNames from 'classnames';
 
-import { MIN_DESKTOP_WIDTH } from 'common/models/constants';
+import { MAX_MOBILE_WIDTH, MIN_DESKTOP_WIDTH, MIN_TABLET_WIDTH } from 'common/models/constants';
 
 import * as styles from 'app/styles/PokemonApp.scss';
 
@@ -35,8 +35,18 @@ export class Footer extends React.Component<IFooterProps> {
                     <Media query={ { minWidth: MIN_DESKTOP_WIDTH } }>
                         <span className={ styles.feedback }>Feedback?</span>
                     </Media>
-                    <a href="mailto:feedback@pvpokemon.com"><i className="nes-icon gmail" /></a>
+                    <Media query={ { minWidth: MIN_TABLET_WIDTH } }>
-                    <a href="https://twitter.com/pvpokemongo"><i className="nes-icon twitter" /></a>
+                        <React.Fragment>
+                            <a href="mailto:feedback@pvpokemon.com"><i className="nes-icon gmail" /></a>
+                            <a href="https://twitter.com/pvpokemongo"><i className="nes-icon twitter" /></a>
+                        </React.Fragment>
+                    </Media>
+                    <Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
+                        <React.Fragment>
+                            <a href="mailto:feedback@pvpokemon.com"><i className="nes-icon is-small gmail" /></a>
+                            <a href="https://twitter.com/pvpokemongo"><i className="nes-icon is-small twitter" /></a>
+                        </React.Fragment>
+                    </Media>
                 </span>
             </footer>
         );