reputation component

app/components/all.scss

@@ -21,6 +21,7 @@
 @import "./elements/GeneratedPasswordInput";
 @import "./elements/TagList";
 @import "./elements/ChangePassword";
+@import "./elements/Reputation";
 
 // modules
 @import "./modules/Header";

app/components/cards/PostSummary.jsx

@@ -11,15 +11,12 @@ import extractContent from 'app/utils/ExtractContent';
 import { browserHistory } from 'react-router';
 import VotesAndComments from 'app/components/elements/VotesAndComments';
 import TagList from 'app/components/elements/TagList';
-import {authorNameAndRep} from 'app/utils/ComponentFormatters'
-import {Map} from 'immutable'
+import {authorNameAndRep} from 'app/utils/ComponentFormatters';
+import {Map} from 'immutable';
+import Reputation from 'app/components/elements/Reputation';
 
 function TimeAuthorCategory({post, links, authorRepLog10, gray}) {
-    const author = <Tooltip t={authorRepLog10 ? authorRepLog10 + ' Reputation' : ''}>
-        <span className={gray ? 'darkred' : '' /*rephide*/}>
-            {authorNameAndRep(post.author, authorRepLog10)}
-        </span>
-    </Tooltip>
+    const author = <strong>{post.author}</strong>;
 
     return (
         <span className="vcard">
@@ -30,6 +27,7 @@ function TimeAuthorCategory({post, links, authorRepLog10, gray}) {
                 <span itemProp="author" itemScope itemType="http://schema.org/Person">
                     {links ? <Link to={post.author_link}>{author}</Link> :
                         <strong>{author}</strong>}
+                    <Reputation value={authorRepLog10} />
                 </span>
             </span>
             <span> in&nbsp;{links ? <TagList post={post} /> : <strong>{post.category}</strong>}</span>

app/components/elements/Author.jsx

@@ -1,11 +1,12 @@
 /* eslint react/prop-types: 0 */
-import React from 'react'
+import React from 'react';
 import shouldComponentUpdate from 'app/utils/shouldComponentUpdate'
 import {LinkWithDropdown} from 'react-foundation-components/lib/global/dropdown'
 import Follow from 'app/components/elements/Follow';
-import Icon from 'app/components/elements/Icon'
-import {browserHistory} from 'react-router'
-import {authorNameAndRep} from 'app/utils/ComponentFormatters'
+import Icon from 'app/components/elements/Icon';
+import {browserHistory} from 'react-router';
+import {authorNameAndRep} from 'app/utils/ComponentFormatters';
+import Reputation from 'app/components/elements/Reputation';
 
 const {string, bool, number} = React.PropTypes
 
@@ -30,7 +31,7 @@ class Author extends React.Component {
         const {username} = this.props // redux
 
         const author_link = <span itemProp="author" itemScope itemType="http://schema.org/Person">
-            <a onClick={this.onAuthorClick}>{authorNameAndRep(author, authorRepLog10)}</a>
+            <a onClick={this.onAuthorClick}><strong>{author}</strong></a><Reputation value={authorRepLog10} />
         </span>
 
         if(!username)

app/components/elements/Reputation.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default ({value}) => {
+    if (!value) return null;
+    return <span className="Reputation" title="Reputation">{value}</span>;
+}

app/components/elements/Reputation.scss

@@ -0,0 +1,10 @@
+.Reputation {
+  font-size: 80%;
+  padding: 0 2px;
+  margin-left: 2px;
+  margin-right: 2px;
+  background-color: #f8f8f8;
+  border-radius: 50%;
+  border: 1px solid #dadada;
+  color: $dark-gray;
+}