import React from 'react';
import styled from 'styled-components';
import moment from 'moment';
import {
  fetchUser
} from '../actions/action-creators';

const UserLink = styled.a`
  display: inline-block;
  margin: 5px auto;
  color: #fff;
  background-color: rgba(255,255,255,0.4);
`;

const UserInfo = styled.ul`
  margin: 0 auto;
  padding: 1rem 0.7rem 0.7rem 0;

  li {
    font-weight: bold;
  }
`;


let User = React.createClass ({

  propTypes: {
    user: React.PropTypes.object.isRequired
  },

  componentWillMount() {
    fetchUser();
  },

  render() {
    const {
      user
    } = this.props;

    const {
      image,
      name,
      playcount,
      registered,
      url
    } = user;

    const registeredElement = moment.unix(registered['#text']).format('MM/DD/YYYY');

    return (
        <UserLink
          href={url} target="_blank">
          <div>
            <img
              src={image['3']['#text']}
              alt={name} />
          </div>
          <UserInfo>
            <li>{name}</li>
            <li>{playcount}</li>
            <li>{registeredElement}</li>
          </UserInfo>
        </UserLink>
    );
  }
});

export default User;

@@ -224,23 +224,8 @@
 to;%0A
-  color: #fff;%0A
   ba
@@ -253,19 +253,20 @@
 255,
+ 
 255,
+ 
 255,
-0.4
+ 1
 );%0A%60
@@ -351,48 +351,51 @@
  0;%0A
-%0A
   
-li %7B%0A    font-weight: bold;%0A  %7D
+text-align: right;%0A  color: #111111;
 %0A%60;%0A%0A
-%0A
 let 

Update User component styles