<commit_before>import React, { PropTypes } from 'react';
import Sticker from './sticker';
import IconAdd from './icons/icon-add';

function MyStickerPacks({ stickerPacks, shop, toggleShop, showPack, colors }) {
  const style = {
    stickers: {
      minWidth: `calc((${stickerPacks.length} * 48px)`
    }
  };

  return (
    <section className="my-packs">
      <section className="pack-list">
        <div className="stickers-tab">
          <div className="stickers" style={style.stickers}>
            {
              stickerPacks.length > 0
              ? stickerPacks.map((stickerPack, index) => (
                <Sticker
                  key={`my-sticker-packs-${stickerPack.pack_name}-${index}`}
                  src={stickerPack.main_icon.mdpi}
                  onClick={() => showPack(stickerPack.pack_name)}
                />
              ))
              : <p>Loading...</p>
            }
          </div>
        </div>
        <div onClick={toggleShop} className="button-shop">
          <IconAdd color={shop ? colors.primary : null} />
        </div>
      </section>
    </section>
  );
}

MyStickerPacks.propTypes = {
  stickerPacks: PropTypes.arrayOf(PropTypes.shape({
    pack_name: PropTypes.string.isRequired,
    main_icon: PropTypes.shape({
      mdpi: PropTypes.string.isRequired,
      hdpi: PropTypes.string.isRequired,
      xhdpi: PropTypes.string.isRequired,
      xxhdpi: PropTypes.string.isRequired
    }).isRequired
  })).isRequired,
  showPack: React.PropTypes.func.isRequired,
  toggleShop: React.PropTypes.func.isRequired,
  shop: React.PropTypes.bool.isRequired,
  colors: PropTypes.shape({
    primary: PropTypes.string.isRequired
  })
};

export default MyStickerPacks;
<commit_msg>:bug: Fixed css syntax bug<commit_after>import React, { PropTypes } from 'react';
import Sticker from './sticker';
import IconAdd from './icons/icon-add';

function MyStickerPacks({ stickerPacks, shop, toggleShop, showPack, colors }) {
  const style = {
    stickers: {
      minWidth: `${stickerPacks.length * 48}px`
    }
  };

  return (
    <section className="my-packs">
      <section className="pack-list">
        <div className="stickers-tab">
          <div className="stickers" style={style.stickers}>
            {
              stickerPacks.length > 0
              ? stickerPacks.map((stickerPack, index) => (
                <Sticker
                  key={`my-sticker-packs-${stickerPack.pack_name}-${index}`}
                  src={stickerPack.main_icon.mdpi}
                  onClick={() => showPack(stickerPack.pack_name)}
                />
              ))
              : <p>Loading...</p>
            }
          </div>
        </div>
        <div onClick={toggleShop} className="button-shop">
          <IconAdd color={shop ? colors.primary : null} />
        </div>
      </section>
    </section>
  );
}

MyStickerPacks.propTypes = {
  stickerPacks: PropTypes.arrayOf(PropTypes.shape({
    pack_name: PropTypes.string.isRequired,
    main_icon: PropTypes.shape({
      mdpi: PropTypes.string.isRequired,
      hdpi: PropTypes.string.isRequired,
      xhdpi: PropTypes.string.isRequired,
      xxhdpi: PropTypes.string.isRequired
    }).isRequired
  })).isRequired,
  showPack: React.PropTypes.func.isRequired,
  toggleShop: React.PropTypes.func.isRequired,
  shop: React.PropTypes.bool.isRequired,
  colors: PropTypes.shape({
    primary: PropTypes.string.isRequired
  })
};

export default MyStickerPacks;

{'fraction_non_alphanumeric': 0.1366262276140959, 'fraction_numerical': 0.0017331022530329288, 'mean_word_length': 2.3917727717923603, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2630513', 'n_tokens_mistral': 1064, 'n_tokens_neox': 1069, 'n_words': 180}