badge.js

import React from 'react';
import { Flex } from 'rebass';

import styled from 'styled-components';

import * as widgets from 'components/widgets'

const BadgeFlex = styled(Flex)`
  width: 500px;
  height: 50px;

  align-items: center;
`;

const BadgeCircle = styled(widgets.Circle)`
  width:  35px;
  height: 35px;

  margin-right: 10px;
`;

const UserText = styled.span`
  color: ${ props => props.theme.color.DarkPrimary };

  font-family: 'Exo 2';
  font-size: ${ props => props.theme.size.Small };
`;

const RankText = styled.span`
  color: ${ props => props.theme.color.DarkSecondary };
  opacity: 0.8;

  font-family: 'Exo 2';
  font-size: ${ props => props.theme.size.ExtraSmall };
`;

export default class Badge extends React.Component {
  render() {
    return (
      <BadgeFlex
        flexDirection='row'
      >
        <BadgeCircle
          thickness='2px'
        >
          <img
            width='100%'
            height='100%'
            src="http://avatars1.githubusercontent.com/u/11465187?s=460&v=4"
          />
        </BadgeCircle>
        <Flex
          width={ 1/2 }
          flexDirection='column'
        >
          <UserText>{ this.props.username }</UserText>
          <RankText>{ this.props.rank }</RankText>
        </Flex>
      </BadgeFlex>
    );
  }
}