<file_sep>import React from 'react';
import _ from 'lodash';

import useStyles from './useStyles';

export default function Pokemon({ className: parentClass, pokemon }) {
  const { className, styles } = useStyles();
  let src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
  let customClass = className;
  let name = pokemon[5];
  let species = _.toLower(pokemon[5]);
  let shiny = '';

  if (pokemon[4]) {
    name = pokemon[4];
    species = _.toLower(pokemon[4]);
  }

  if (parentClass) customClass = `${parentClass} ${className}`
  if (pokemon[1]) shiny = '-shiny';
  if (pokemon[3]) name = pokemon[3];
  if (_.endsWith(species, '.')) species = _.replace(species, '.', '');

  species = _.replace(species, ' (', '-');
  species = _.replace(species, '♂', '_m');
  species = _.replace(species, '♀', '_f');
  species = _.replace(species, ' ', '_');
  species = _.replace(species, '’', '');
  species = _.replace(species, ')', '');

  if (species) src = `http://www.pkparaiso.com/imagenes/xy/sprites/animados${shiny}/${species}.gif`;

  return (
    <div className={ `${customClass} container` } data-dead={ pokemon[2] }>
      <div className={ `${className} sprite` }>
        <img className={ className } src={ src } alt="" />
      </div>

      <span className={ className }>{ name }</span>
      { styles }
    </div>
  );
}
<file_sep>import React from 'react'; // eslint-disable-line no-unused-vars
import { resolve } from 'styled-jsx/css';

const useStyles = () => {
  return resolve`
    main {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      flex-wrap: wrap;
      overflow: hidden;
      /* background-color: black; */
      width: 466px;
      height: 176px;

      > div.badges {
        flex: 1 1 100%;
        display: flex;
        justify-content: space-between;
        height: 48px;
        transition: height 0.2s;

        > img {
          object-fit: contain;
          max-width: 48px;
          max-height: 48px;
          filter: grayscale(1);
          opacity: 0.5;
          transform: scale(1);
          transition: filter 0.2s, opacity 0.2s, transform 0.2s;

          &[data-obtained="true"] {
            filter: grayscale(0);
            opacity: 1;
            transform: scale(1.25);
          }
        }

        &.beaten {
          height: 0px;
        }
      }

      > span.hall-of-fame {
        flex: 1 1 100%;
        display: flex;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        height: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        white-space: nowrap;
        transition: height 0.2s, margin-top 0.2s, margin-bottom 0.2s;

        &.beaten {
          height: 19px;
          margin-top: 14px;
          margin-bottom: 13px;
        }

        &::before, &::after {
          margin: auto 12px;
          width: 100%;
          height: 0px;
          border: 1px solid #ffffff;
          content: '';
        }
      }
    }
  `;
};

export default useStyles;
<file_sep>import React from 'react';

import robotoLight from './fonts/Roboto-Light.ttf';
import robotoRegular from './fonts/Roboto-Regular.ttf';
import robotoMedium from './fonts/Roboto-Medium.ttf';

const useGlobalStyles = () => {
  return <style jsx global>{ `
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: url(${robotoLight}) format('truetype');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      src: url(${robotoRegular}) format('truetype');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 500;
      src: url(${robotoMedium}) format('truetype');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root {
      --safe-area-inset-top: env(safe-area-inset-top);
      --safe-area-inset-left: env(safe-area-inset-left);
      --safe-area-inset-right: env(safe-area-inset-right);
      --safe-area-inset-bottom: env(safe-area-inset-bottom);
    }

    * {
      margin: 0px;
      outline: 0px;
      border: 0px;
      padding: 0px;
    }

    html,
    body,
    #root {
      overflow-x: hidden;
      height: 100%;
    }

    body,
    #root {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    body {
      font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
      color: #FFFFFF;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.5px;
      -webkit-overflow-scrolling: touch;
    }

    #root {
      align-items: center;
      justify-content: center;
    }
  `}</style>;
};

export default useGlobalStyles;
