layout refresh

1 files changed, 16 insertions, 5 deletions

diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js
index 0df0dbd7..f79d7b09 100644
--- a/vnext/src/components/Avatar.js
+++ b/vnext/src/components/Avatar.js
@@ -6,15 +6,26 @@ import { UserType } from './Types';
 
 export default function Avatar(props) {
     return (
-        <div className="msg-avatar">
-            <Link to={{ pathname: props.link || `/${props.user.uname}/`}}>
-                <img src={`//i.juick.com/a/${props.user.uid}.png`} alt={`${props.user.uname}`} />
-            </Link>
+        <div style={{ display: 'flex' }}>
+            <div className="msg-avatar">
+                <Link to={{ pathname: props.link || `/${props.user.uname}/` }}>
+                    <img src={`//i.juick.com/a/${props.user.uid}.png`} alt={`${props.user.uname}`} />
+                </Link>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
+                    <Link to={{ pathname: `/${props.user.uname}/` }} itemProp="url" rel="author">
+                        <span itemProp="name">{props.user.uname}</span>
+                    </Link>
+                </span>
+                {props.children}
+            </div>
         </div>
     );
 }
 
 Avatar.propTypes = {
     user: UserType,
-    link: PropTypes.string
+    link: PropTypes.string,
+    children: PropTypes.node
 };