wrap Avatar to add styles

frontend/src/components/article/index.js

@@ -1,14 +1,9 @@
 const Styled = require('styled-components');
-// const fns = require('@ui/shared/functions');
 
 const {
   default: styled
 } = Styled;
 
-// const {
-//   remcalc
-// } = fns;
-
 // Main Contonent Wrapper Styles
 module.exports = styled.article`
 `;

frontend/src/components/header/index.js

@@ -65,16 +65,20 @@ const StyledName = styled.span`
   top: -12px;
 `;
 
+const EmptyButton = styled.button`
+  background: none;
+  border: none;
+`;
+
+const StyledAvatar = styled(Avatar)`
+  marginLeft: 12px;
+`;
+
 const arrowPosition = {
   bottom: '100%',
   right: '10%'
 };
 
-const EmptyButton = styled.button`
-  background: none
-  border: none
-`;
-
 const Header = ({
   account = {},
   tooltip = false,
@@ -107,27 +111,20 @@ const Header = ({
         <Row>
           <Column xs={2}>
             <Link to='/'>
-              <StyledLogo
+              <StyledLogo alt='Joyent' src={logo} />
-                alt='Joyent'
-                src={logo}
-              />
             </Link>
           </Column>
-          <Column
+          <Column smOffset={8.5} xs={1.5}>
-            smOffset={8.5}
-            xs={1.5}
-          >
             <StyledProfileWrapper>
               <StyledAvatarWrapper toggled={tooltip}>
                 <EmptyButton onClick={handleToggleClick}>
-                  <StyledName>{account.name}</StyledName>
+                  <StyledName>
-                  <Avatar
+                    {account.name}
+                  </StyledName>
+                  <StyledAvatar
                     alt={account.name}
                     name={account.name}
                     src={account.avatar}
-                    style={{
-                      marginLeft: '12px'
-                    }}
                   />
                 </EmptyButton>
               </StyledAvatarWrapper>